<template>
	<div class="tab-title-page goods_list">
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="手机号码">
					<el-input v-model="searchForm.mobile" placeholder="请输入手机号码" clearable />
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="searchForm.cert_name" placeholder="请输入姓名" clearable />
				</el-form-item>
				<el-form-item label="身份证">
					<el-input v-model="searchForm.cert_no" placeholder="请输入身份证" clearable />
				</el-form-item>
				<el-form-item label="绑卡时间">
					<my-date-picker ref="myDatePicker" />
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider class="middle_divider" />
		<div class="child_page">
			<div class="flex align-center table-top-btns">
				<h5 class="flex align-center">
					<svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
				</h5>
			</div>
			<el-table :data="tableData" border :row-class-name="rowStyle" v-show="tableData.length > -1">
				<el-table-column align="center" prop="id" label="ID" />
				<el-table-column align="center" prop="cert_name" label="姓名" />
				<el-table-column align="center" prop="cert_no" label="身份证" />
				<el-table-column align="center" prop="mobile" label="手机号码" >
					<template slot-scope="scope">
						{{encryptPhoneNumber(scope.row.mobile)}}
					</template>
					</el-table-column>
				<el-table-column align="center" label="状态">
					<template slot-scope="scope">
						<el-tag :type="scope.row.is_bind == 2 ? 'success' : 'danger'">{{ scope.row.bind }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="card_number" label="银行卡" />
				<el-table-column align="center" label="是否默认">
					<template slot-scope="scope">
						<el-tag :type="scope.row.is_default == 1 ? 'success' : 'danger'">{{ scope.row.is_default==1?'是':'否' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="create_time" label="绑定时间" />
				<el-table-column align="center" fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="checkLogistics(scope.row)">设置默认</el-button>
					</template>
				</el-table-column>
			</el-table>
			<custom-page ref="customPage" :total="total" :page-size="pageSize" @getList="getList" />
		</div>
	</div>
</template>

<script>
import { cardLists, setCardDefault } from '@/api/data'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
export default {
	components: { customPage, myDatePicker },
	data() {
		return {
			searchForm: {
				mobile: '',
				cert_name: '',
				cert_no: '',
				create_time: '',
			},
			selectedId: '',
			total: 0,
			tableData: [],
			pageSize:50
		}
	},
	methods: {
    encryptPhoneNumber(phone) {
      const reg = /(\d{3})\d{4}(\d{4})/
      return String(phone).replace(reg, "$1****$2")
    },
		checkLogistics(item) {
			console.log(item);
			let params = {
				card_id: item.id,
				cert_no: item.cert_no
			}
			this.$confirm('是否确定设置为默认?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				setCardDefault(params).then(res => {
					this.getList()
				})
			}).catch(() => { })
		},
		// 获取数据
		getList(flag) {
			// flag为true, 则不刷新表格
			const { page, pageSize } = this.$refs.customPage
			if (!flag) {
				this.tableData = []
			}
			cardLists({
				page,
				pageSize,
				...this.searchForm,
			}).then((res) => {
				this.tableData = res.data || []
				this.total = res.total
			})
		},
		// 查询
		search() {
			const pickerVal_start = this.$refs.myDatePicker.getVal()
			if (pickerVal_start !== 'error') {
				this.searchForm.create_time = pickerVal_start
			}
			this.$refs.customPage.page = 1
			this.getList()
		},
		// 重置
		reset() {
			if (this.$refs.myDatePicker) {
				this.$refs.myDatePicker.reset()
			}
			this.searchForm = {
				mobile: '',
				cert_name: '',
				cert_no: '',
				create_time: '',
			}
			this.getList()
		},
	},
	mounted() {
		this.getList()
	}
}
</script>

<style lang="scss" scoped>
.el-button--warning.is-plain {
	color: #ff9f38;
	background: #fff;
	border-color: #ff9f38;
}

.el-icon-upload2 {
	font-size: 18px;
}

.dialog {
	text-align: center;
}

.goods_info {
	.info {
		margin-left: 10px;

		p {
			color: #666666;
		}

		p:first-child {
			color: #999999;
		}
	}
}

.activity {
	line-height: 24px;

	span {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}
}

.child_page {
	padding: 30px;
}

.common_form_search {
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
}
</style>
